<template>
  <div>
    <div class="ks-row-middle mb20 lh1">
      <span style="width: 60px">组件</span>
      <el-select
        v-model="modelId"
        filterable
        style="width: 400px"
      >
        <el-option
          v-for="com in list"
          :key="com.key"
          :value="com.key"
          :label="com.__config.label ? com.name + com.__config.label + '（' + com.key + '）':com.name + '（' + com.key + '）' "
        />
      </el-select>
    </div>
    <template v-if="modelId">
      <div  class="ks-row-between mb20 lh1">
        唯一标识 {{ modelId }}
      </div>
      <div v-if="block.type === 'component_display'" class="ks-row-middle mb20 lh1">
        <span style="width: 60px">类型：</span>
        <el-radio-group v-model="displayType">
        <el-radio :label="true">显示</el-radio>
        <el-radio :label="false">隐藏</el-radio>
        </el-radio-group>
      </div>
      <div v-if="block.type === 'component_disable'" class="ks-row-middle mb20 lh1">
        <span style="width: 60px">类型：</span>
        <el-radio-group v-model="disableType">
          <el-radio :label="false">启用</el-radio>
          <el-radio :label="true">禁用</el-radio>
        </el-radio-group>
      </div>
      <!--必填非必填-->
      <div v-if="block.type === 'component_required'" class="ks-row-middle mb20 lh1">
        <span style="width: 60px">类型：</span>
        <el-radio-group v-model="requiredType">
          <el-radio :label="true">必填</el-radio>
          <el-radio :label="false">非必填</el-radio>
        </el-radio-group>
      </div>

    </template>

  </div>
</template>

<script>

import { mapGetters } from 'vuex'
import {getAllComponentList} from '../../../utils/component'
export default {
  name: 'ComponentSelect',
  props: {
    eventItem: {}, // 需要逻辑编排的对象
    componentItem: {},
    block: {},
    workspace: {}
  },
  components: { },
  computed: {
    modelId: {
      get() {
        const blockComponentId = this.block?.getFieldValue('Component')
        return blockComponentId || ''
      },
      set(val) {
        this.block.setFieldValue(val, 'Component')
      }
    },
    // 显示隐藏
    displayType: {
      get() {
        const displayType = this.block?.getFieldValue('DISPLAY_TYPE')
        return displayType === '显示'
      },
      set(val) {
        const text = val ? '显示' : '隐藏'
        this.block.setFieldValue(text, 'DISPLAY_TYPE')
      }
    },
    // 禁用启用
    disableType: {
      get() {
        const displayType = this.block?.getFieldValue('DISABLE_TYPE')
        return displayType === '禁用'
      },
      set(val) {
        const text = val ? '禁用' : '启用'
        this.block.setFieldValue(text, 'DISABLE_TYPE')
      }
    },
    // 必填非必填
    requiredType: {
      get() {
        const requiredType = this.block?.getFieldValue('REQUIRED_TYPE')
        return requiredType === '设为必填'
      },
      set(val) {
        const text = val ? '设为必填' : '设为非必填'
        this.block.setFieldValue(text, 'REQUIRED_TYPE')
      }
    },

  },
  data () {
    return {
      formData: {},
      list: [] // 组件列表
      // modelId: ''
    }
  },
  watch: {
    'block': {
      handler() {
        this.getBlockData()
      },
      immediate: true
    }
  },
  methods: {
    getBlockData() {
      this.list = getAllComponentList() || []
      if (!this.list.length) return
      const blockComponentId = this.block?.getFieldValue('Component')
      if (blockComponentId) {
        this.modelId = blockComponentId
      }
      if(this.block.type === 'component_show'){
        const displayType = this.block?.getFieldValue('DISPLAY_TYPE')
        this.displayType = displayType === '显示'
      } else  if(this.block.type === 'component_disable'){
        const disableType = this.block?.getFieldValue('DISABLE_TYPE')
        this.disableType = disableType === '禁用'
      } else if(this.block.type === 'component_required'){
        const requiredType = this.block?.getFieldValue('REQUIRED_TYPE')
        this.requireType = requiredType === '设为必填'
      }


    }
  }
}
</script>

<style scoped>

</style>
